<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<script src="https://unpkg.com/vue-router@4.5.0/dist/vue-router.global.js"></script>
	<body>
		<div id="app">
			<h2>网站导航</h2>
			<a href="#/">首页</a>&nbsp;
			<a href="#/login">登录页</a>&nbsp;
			<a href="#/register">注册页</a>&nbsp;
			<a href="#/about">关于页</a>&nbsp;
			
			<h2>网站导航-方式2</h2>
			<router-link to="/">首页</router-link>&nbsp;
			<router-link to="/login">登录页</router-link>&nbsp;
			<router-link to="/register">注册页</router-link>&nbsp;
			<router-link to="/about">关于页</router-link>&nbsp;
			<router-link to="/detail/0">商品1</router-link>&nbsp;
			<router-link to="/detail/1">商品2</router-link>&nbsp;
			<router-link to="/list">商品列表</router-link>&nbsp;
			
			<!-- 路由出口 当前的路由会显示在这个标签中 -->
			<router-view></router-view>
		</div>
		
		<script type="module">		
			// 1.导入组件
			import home from './home.js'
			import login from './login.js'
			import about from './about.js'
			import register from './register.js'
			import productdetail from './productdetail.js'
			import productlist from './productlist.js'
			
			// 2.定义路由配置信息
			// path 指定访问路径
			// component 对应组件
			const routes = [
				{path: "/",component: home},
				{path: "/login",component: login},
				{path: "/about",component: about},
				{path: "/register",component: register},
				{path: "/detail/:id",component: productdetail},
				{path: "/list",component: productlist},
			]
			
			// 3.创建路由对象
			const router = VueRouter.createRouter(
				{
					// 指定一个路径的访问模式
					history: VueRouter.createWebHashHistory(),
					routes,
				}
			)
			
			var app = Vue.createApp({
				data(){
					return {
						message:"Hello World!",
					}
				}
			})
			
			// 4.让应用支持路由
			app.use(router)
			
			var vm = app.mount("#app")
		</script>
	</body>
</html>

